<template>
  <div
    class="w750 gray-body scrollable"
    :class="[(Nomsg ? 'white-bg': '') ,themes.theme]"
    @scroll="onScroll"
    ref="w750"
  >
    <!-- 头部 -->
    <!-- <header v-if="!preview">
      <div class="header-box">
        <div class="header-back" @click="goback">
          <span class="back-img"><img src="../../assets/images/back.png" alt=""></span>
        </div>
        <div class="header-search">
          <p class="ser-txt">{{headerTitle}}</p>
        </div>
		<div class="header-mes"></div>
      </div>
    </header> -->
    <!-- /头部 -->

    <template v-if="Nomsg == false">

      <template v-if="!loadFailed">
        <template v-if="floorArr && floorArr.length">
          <div class="index">
            <!-- 楼层装修 -->
            <div class="floor" v-for="(floors,index) in floorArr" :key="index">
              <!-- 轮播图 -->
              <template v-if="floors.type == 'slider'">
                <div class="banner" v-if="floors.photos && floors.photos.length">
                  <slider :floors="floors" @click="jumpPage"></slider>
                </div>
              </template>
              <!-- 轮播图 end-->

              <!-- 图文导航 -->
            <template v-if="floors.type == 'navigation'">
              <navigation :floors="floors" @click="jumpPage"></navigation>
            </template>
            <!-- 图文导航 -->


            <!-- 标题组件 -->
            <template v-if="floors.type == 'title'">
              <ls-title :floors="floors" @click="jumpPage"></ls-title>
            </template>
            <!-- 标题组件 end -->

            <!-- 魔方 -->
            <template v-if="floors.type == 'cube'">
              <cube :floors="floors" @click="jumpPage"></cube>
            </template>
            <!-- 魔方 end -->

            <!-- 商品列表 -->
            <template v-if="floors.type == 'prodList'">
              <prod-list :floors="floors" :scrollTop="scrollTop"></prod-list>
            </template>
            <!-- 商品列表 end-->

            <!-- 辅助空白 -->
            <template v-if="floors.type == 'blank'">
              <blank :floors="floors"></blank>
            </template>
            <!-- 辅助空白 end -->

            <!-- 辅助线 -->
            <template v-if="floors.type == 'subline'">
              <subline :floors="floors"></subline>
            </template>

            <!-- 辅助线 end -->

            <!-- 富文本 -->
            <template v-if="floors.type == 'richText'">
              <rich-text :floors="floors"></rich-text>
            </template>
            <!-- 富文本 -->

            </div>
            <!-- 楼层装修 -->
          </div>
        </template>
      </template>

      <template v-if="loadFailed">
        <div class="reFresh">
          <img src="../../assets/images/noLine.png" alt />
          <p>网络请求失败</p>
          <div>请检查网络后,下拉刷新重试</div>
        </div>
      </template>
    </template>

    <Noempty
      :pic="require('../../assets/images/order-empty.png')"
      :title="'您暂无相关楼层装修'"
      v-if="Nomsg"
    />
    <!-- 先用这个 -->
    <div style="height: 60px;"></div>
  </div>
</template>

<script>
import slider from "components/index/slider";
import navigation from "components/index/navigation";
import lsTitle from "components/index/lsTitle";
import cube from "components/index/cube";
import prodList from "components/index/prodList";
import blank from "components/index/blank";
import subline from "components/index/subline";
import richText from "components/index/richText";
import Noempty from "components/Noempty/Noempty";
import ProList from "components/proList/proList";
import { mapState } from "vuex";
import { showTemplatePage} from "api/index";
import jumpMixin from "mixin/jumpMixin.js"
export default {
  data() {
    return {
        preview: false,
        headerTitle: '', //头部title
        floorArr: null, //楼层装修
        Nomsg: false,
        isLoading: false,
        loadFailed: false,
        isScroll: false,
        scrollTop: 0, //滚动高
    };
  },
  mixins: [jumpMixin],
  mounted() {
    let templateId = this.$route.query.templateId;
    // this.headerTitle = this.$route.query.title;
    // this.preview = this.$route.query.preview;
    //获取商城首页数据
    this.getShoppingIndex(templateId);
  },
  
  methods: {
    goback() {
      this.$router.back();
      this.$router.isBack = true;
    },
    //获取首页装修数据
    getShoppingIndex(templateId) {
      let that = this
      showTemplatePage( { templateId: templateId }).then(res => {
          if (res.status == 1) {
            this.loadFailed = false;
            if (res.result) {
             this.floorArr = res.result.components;
            } else {
              this.Nomsg = true;
            }
          } else {
            this.Nomsg = true;
            this.$toast(res.msg);
          }
        }).catch(e => {
          this.loadFailed = true;
        });
    },
    
    onScroll(event) {
      // console.debug(event);
      let target = event.target;
      this.scrollTop = target.scrollTop
    }
  },
  
  components: {
    ProList,
    Noempty,
    slider,
    navigation,
    lsTitle,
    cube,
    prodList,
    blank,
    subline,
    richText,
  },
  computed: {
    ...mapState(["themes"])
  }
};
</script>


<style src="../../assets/css/index.css" scoped></style>
<style scoped>
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
.van-swipe__indicators {
  bottom: 25px !important;
}
.van-swipe__indicators .van-swipe__indicator {
  width: 8px !important;
  height: 8px !important;
}
.van-pull-refresh {
  min-height: 100%;
}
</style>
<style scoped lang="stylus">
.reFresh {
  width: 100%;
  height: 100%;
  margin: 100px auto;
  text-align: center;

  img {
    width: 100px;
    height: 100px;
  }
}
</style>
<style lang="stylus">
#commCotent4 {
  width: 100%;

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  a {
    width: 100% !important;
  }

  div {
    width: 100% !important;
  }

  ul {
    width: 100% !important;
  }

  li {
    width: 100% !important;
  }
}

.scrollable {
  overflow: scroll;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
